<template>
  <div class="header-swiper">
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide v-for="item in swiperList" :key="item.id">
        <img :src="item.imgUrl" />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOptions: {
          pagination: {
            el: '.swiper-pagination'
          },
          loop:true,
          autoplay:true
        },
        swiperList:[
          {
            id:"01",
            imgUrl:require('@/assets/images/banner3.jpg')
          },
          {
            id:"02",
            imgUrl:require('@/assets/images/banner4.jpg')
          }
        ]
      }

    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.$swiper
      }
    }
  }
</script>
<style>
.header-swiper{
  width:100%;
}
.header-swiper img{
  width:100%;
  height:100%;
}
.header-swiper .swiper-wrapper{
  width:100%;
  height:100%;
}
</style>
